<template>
  <div class="titles">
		<h1 class="title">{{title}}</h1>
    <div class="date">{{date}}</div>
		<a class="rule" href="#">榜单规则</a>
  </div>
</template>

<script>
  export default{
    name:'',
    data(){
      return {
        
      }
    },
    computed:{
      
    },
    props:{
      title:{
        type:String,
        default(){
          return "飙升榜"
        }
      },
			date:{
        type:String,
        default(){
          return "2022-01-22"
        }
      },
    },
    methods:{
      test(){
        
      }
    },
    components:{
       
    },
    created(){
      
    },
    activated(){
    
    },
    mounted(){
    
    },
    updated(){
      
    },
    deactivated(){
    
    },
    destroyed(){
    
    },
  }
</script>

<style scoped>
	.titles{
		display: flex;
	}
	.title,.date,.rule{
		margin: 0 10px;
		line-height: 41px;
	}
	.title{
		font-size: var(--font-title-size);
		font-family: "微软雅黑";
		font-weight: normal;
	}
	.date,.rule{
		font-size: var(--font-middle-size);
	}
	.rule:hover{
		color: var(--bcc-green);
	}
</style>
